<%# locals: (entry:) %>

<div id="<%= dom_id(entry, :header) %>">
  <%= tag.header class: "mb-4 space-y-1" do %>
    <span class="text-secondary text-sm">
      <%= entry.amount.negative? ? t(".sell") : t(".buy") %>
    </span>

    <div class="flex items-center gap-4">
      <h3 class="font-medium">
        <span class="text-2xl">
          <%= format_money entry.amount_money %>
        </span>

        <span class="text-lg text-secondary">
          <%= entry.currency %>
        </span>
      </h3>

      <% if entry.linked? %>
        <span title="Linked with Plaid">
          <%= icon("refresh-ccw", size: "sm") %>
        </span>
      <% end %>
    </div>

    <span class="text-sm text-secondary">
      <%= I18n.l(entry.date, format: :long) %>
    </span>
  <% end %>

  <% trade = entry.trade %>

  <div class="mb-2">
    <%= render DS::Disclosure.new(title: t(".overview"), open: true) do %>
      <div class="pb-4">
        <dl class="space-y-3 px-3 py-2">
          <div class="flex items-center justify-between text-sm">
            <dt class="text-secondary"><%= t(".symbol_label") %></dt>
            <dd class="text-primary"><%= trade.security.ticker %></dd>
          </div>

          <% if trade.qty.positive? %>
            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary"><%= t(".purchase_qty_label") %></dt>
              <dd class="text-primary"><%= trade.qty.abs %></dd>
            </div>

            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary"><%= t(".purchase_price_label") %></dt>
              <dd class="text-primary"><%= format_money trade.price_money %></dd>
            </div>
          <% end %>

          <% if trade.security.current_price.present? %>
            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary"><%= t(".current_market_price_label") %></dt>
              <dd class="text-primary"><%= format_money trade.security.current_price %></dd>
            </div>
          <% end %>

          <% if trade.qty.positive? && trade.unrealized_gain_loss.present? %>
            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary"><%= t(".total_return_label") %></dt>
              <dd style="color: <%= trade.unrealized_gain_loss.color %>;">
                <%= render "shared/trend_change", trend: trade.unrealized_gain_loss %>
              </dd>
            </div>
          <% end %>
        </dl>
      </div>
    <% end %>
  </div>
</div>
